<script setup lang="ts">
import type { LoveDetails } from '@/types/userInfo'
import { ref } from 'vue'

const { safeAreaInsets } = uni.getSystemInfoSync()

const loveDetails = ref<LoveDetails>({
  loveTime: 122,
  woman: '微末',
  man: 'zh',
  backImg:
    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2Fd469a138-04da-361c-b341-544f273f06f3%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705326849&t=20feb9353e26a660bf05b66ef6661a2f',
})

const time = ref<Date>(new Date())
// 定义一个变量来保存定时器的ID
let timerId: number | null = null
// 定义一个函数来启动定时器
function startTimer(a: any) {
  if (timerId === null) {
    timerId = setInterval(a, 1000)
  }
}
// 定义一个函数来停止定时器
function stopTimer() {
  if (timerId !== null) {
    clearInterval(timerId)
    timerId = null
  }
}
//开启定时器
startTimer(() => {
  time.value = new Date()
})

function selectImg() {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      const tempFilePaths = res.tempFilePaths
      loveDetails.value.backImg = tempFilePaths[0]
      // console.log(tempFilePaths)
      // uni.previewImage({
      //   urls: tempFilePaths,
      // })
    },
  })
}
</script>

<template>
  <view class="viewport" :style="{ backgroundImage: 'url(' + loveDetails.backImg + ')' }">
    <!-- 个人资料 -->
    <view class="profile" :style="{ paddingTop: safeAreaInsets!.top + 'px' }">
      <view class="overview">
        <view class="love-name"> 我们在一起已经 </view>
        <view class="love-time">第
          <text>{{ loveDetails.loveTime }}</text>
          天
          <text>{{ time.getHours() < 10 ? '0' + time.getHours() : time.getHours() }}</text>
              小时
              <text>{{ time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes() }}</text>
                  分
                  <text>{{ time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds() }}</text>
                      秒
        </view>
      </view>
      <!-- 情况1：已登录 -->
      <!-- <view class="overview"> </view> -->
    </view>
    <view class="tool">
      <image class="icon" src="/static/images/imgt.png" @click="selectImg" />
    </view>
    <view class="center"></view>
    <view class="buttom"></view>
  </view>
</template>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
  background-color: #f7f7f8;
}

.viewport {
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

/* 用户信息 */
.profile {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;

  .overview {
    margin-top: 380rpx;
    display: flex;
    flex-direction: column;
    height: 260rpx;
    padding: 0 36rpx;

    .love-name {
      text-align: center;
      font-size: 30rpx;
      line-height: 4;
      color: #ffffff;
    }

    .love-time {
      font-size: 30rpx;
      line-height: 1.2;
      color: #ffffff;

      text {
        font-size: 60rpx;
      }

      font-size: 40rpx;
      line-height: 1.2;
      color: #ffffff;
    }

    .love-time {
      font-size: 30rpx;
      line-height: 1.2;
      color: #ffffff;

      text {
        font-size: 60rpx;
      }
    }
  }
}

.tool {
  margin-top: 270rpx;
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
  margin-right: 25px;
  height: 50rpx;

  .icon {
    width: 50rpx;
    height: 50rpx;
  }
}

.buttom {
  margin-top: 140rpx;
  border-radius: 30rpx;
  height: 100%;
  background-color: #f7f7f8;
}

.center {
  position: absolute;
  top: 1030rpx;
  /* 距离顶部10像素 */
  left: 30rpx;
  z-index: 10;
  /* 设置z轴层级，确保在另一个盒子之上 */
  border-radius: 30rpx;
  height: 160rpx;
  width: 700rpx;
  display: flex;
  background-color: #fff;
}
</style>
